<template>
  <div>
      <div class="list-li" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
          <div class="con">
            <p class="top"><span>{{item.consignee}}</span><span class="right">{{item.mobile}}</span></p>
            <p class="bottom">{{item.address}}</p>
          </div>
          <div class="btn">删除</div>
      </div>
    </div>
</template>
<script>
  export default {
    name: 'swipeout-item',
    props: {
      
    },
    data () {
      return {
        initX: 0,
        moveX: 0,
        objX: 0,
        obj: ''
      }
    },
    methods: {
      touchstart (e) {
        this.obj = e.target.parentNode
        this.initX = e.targetTouches[0].pageX
        this.objX =(this.obj.style.WebkitTransform.replace(/translateX\(/g,"").replace(/px\)/g,""))*1
        console.log("objX = " + this.objX)
      },
      touchmove (e) {
        if(this.objX == 0) {
          this.moveX = e.targetTouches[0].pageX
          var X = this.moveX - this.initX;
          if (X > 0) {
            this.obj.style.WebkitTransform = "translateX(" + 0 + "px)";
          }
          else if (X < 0) {
            var l = Math.abs(X);
            this.obj.style.WebkitTransform = "translateX(" + (-l) + "px)";
            if( l > 80 ){
              l=80;
              this.obj.style.WebkitTransform = "translateX(" + (-l) + "px)";
            }
          }
        } else {
          this.moveX = e.targetTouches[0].pageX
          var X = this.moveX - this.initX;
          if (X > 0) {
            var r = -80 + Math.abs(X);
							this.obj.style.WebkitTransform = "translateX(" + r + "px)";
							if(r>0){
								r=0;
								this.obj.style.WebkitTransform = "translateX(" + r + "px)";
							}
          }
          else if (X < 0) {
            this.obj.style.WebkitTransform = "translateX(" + -80 + "px)";
          }
        }
        this.moveX = e.targetTouches[0].pageX
        console.log(this.moveX - this.initX)
      },
      touchend (e) {
        this.objX =( this.obj.style.WebkitTransform.replace(/translateX\(/g,"").replace(/px\)/g,"") )*1;
				if( this.objX>-50 ){
					this.obj.style.WebkitTransform = "translateX(" + 0 + "px)";
				} else {
					this.obj.style.WebkitTransform = "translateX(" + -80 + "px)";
				}
      },
    }
  }
</script>
<style>
	.list-li{ 
    line-height: 40px; 
    border-bottom: 1px solid #fcfcfc; 
    position:relative;padding: 0 12px; 
    color: #666;
		background: #f2f2f2;
		-webkit-transform: translateX(0px);
	}
	.btn{ 
    position: absolute; 
    top: 0; right: -80px; 
    text-align: center; 
    background: #ffcb20; 
    color: #fff; 
    width: 80px;
  }
</style>
